{% load static%}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>异常设备信息查询</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/bootstrap-table.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/table.css' %}" rel="stylesheet" type="text/css">
</head>
<body style="background-color: #ecf0f5; font-family: 微软雅黑; color: #475059; min-width: 1150px; overflow: auto">
    <div class="notice_main">
        <h6>设备异常信息</h6>
        <div style="border-bottom: 1px #ccc solid; padding-bottom: 8px">
            <ul class="ts">
                <li><span>*</span>该页面显示异常设备信息。</li>
            </ul>
        </div>

        <div class="notice_check">
            <p>
                <label>设备编号：</label>
                <input type="text" id="deviceSearch" class="find_input">
                <label>检测时间：</label>
                <input type="text" id="timeSearch" class="find_input" placeholder="YYYY-MM-DD">
                <button class="check_btn" id="searchButton">查询</button>
            </p>
        </div>

        <table id="errorTable" class="table table-bordered" style="width: 90%; margin: 20px auto;">
            <thead>
                <tr>
                    <th>图片编号</th>
                    <th>设备编号</th>
                    <th>检测时间</th>
                    <th>异常图片</th>
                </tr>
            </thead>
            <tbody>
                <!-- 实时数据通过JavaScript填充 -->
            </tbody>
        </table>
    </div>

    <script src="{% static 'js/jquery.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/bootstrap-table.js' %}"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            function fetchErrorData(searchParams = {}) {
                $.ajax({
                    url: '/get_error_data/', // 后端提供的接口，返回异常信息数据
                    method: 'GET',
                    data: searchParams, // 传递搜索参数
                    success: function(data) {
                        console.log(data);  // 检查返回的数据是否包含 image_id
                        const tbody = $('#errorTable tbody');
                        tbody.empty(); // 清空现有数据

                        data.forEach(function(item) {
                            const row = `
                                <tr>
                                    <td>${item.image_id ? item.image_id : 'N/A'}</td>
                                    <td>${item.device_id}</td>
                                    <td>${item.timestamp}</td>
                                    <td><img src="${item.image_url}" alt="异常图片" style="width: 100px; height: auto;"></td>
                                </tr>`;
                            tbody.append(row);
                        });
                    },
                    error: function(error) {
                        console.log('Error fetching data:', error);
                    }
                });
            }

            // 定时刷新数据
            setInterval(fetchErrorData, 5000); // 每5秒更新一次

            // 初次加载数据
            fetchErrorData();

            // 搜索功能
            $('#searchButton').click(function () {
                const deviceSearch = $('#deviceSearch').val().trim();
                const timeSearch = $('#timeSearch').val().trim();

                // 通过查询条件重新获取数据
                fetchErrorData({
                    device_id: deviceSearch,
                    timestamp: timeSearch
                });
            });
        });
    </script>
</body>
</html>
